<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <div class="box-body table-responsive no-padding">
            <div class="form-inline">
                <div id="dvThead">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="width: 20%;">SKU</th>
                            <th style="width: 20%;">产品名称</th>
                            <th style="width: 100px;">需求月份</th>
                            <th style="width: 100px;">备货数量</th>
                            <th style="width: 100px;">计划数量</th>
                            <th style="width: 100px;">发货数量</th>
                            <th style="width: 100px;">发货箱数</th>
                            <th style="width: 100px;">操作</th>
                        </tr>
                        </thead>
                        <tr>
                            <input type="hidden" name="pickup_no" value="{{ $pickupOrder->pickup_no }}"/>
                            <td>{{ '' }}</td>
                            <td>{{ '' }}</td>
                            <td>{{ $pickupOrder->instant_num }}</td>
                            <td>{{ $pickupOrder->instant_num }}</td>
                            <td>{{ $pickupOrder->instant_num }}</td>
                            <td>{{ $pickupOrder->instant_num }}</td>
                            <td>{{ $pickupOrder->instant_num }}</td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div id="dvTbody">
                    <table class="table table-hover" id="table-detail">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-xs btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    {{ csrf_field() }}
    {{--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--}}
    <button type="button" id="submit-form" class="btn btn-primary">提交修改</button>
</div>
<template id="table-detail-tpl">
    <tr>
        <td style="width: 20%;"><select style="width:100%" name="param[__index__][psku_id]" class="gird-sku-select"></select></td>
        <td style="width: 20%;"></td>

        <td style="width: 100px;"><input type="text" class="form-control gird-demand-month demand_month_" placeholder="需求月份" name="param[__index__][demand_month]"></td>
        <td style="width: 100px;"><input type="text" class="form-control integer_num_" placeholder="计划数量" name="param[__index__][apply_num]"></td>
        <td style="width: 100px;"><a class="btn btn-xs btn-danger table-detail-remove"><i class="fa fa-trash"></i> remove</a></td>
    </tr>
</template>


<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 100%;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>


<script language="JavaScript" type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover();


        $('#add-table-detail').click(function (event) {
            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $('.gird-demand-month').datetimepicker({"format":"YYYY-MM","locale":"zh-CN","maxDate":moment()});

            $('.gird-sku-select').select2({
                ajax: {
                    url: "/xqc/api-sys/products-vague-sku",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: $.map(data.data, function (d) {
                                return d;
                            }),
                            pagination: {
                                more: (params.page * 2) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                "allowClear":true,
                "placeholder":"输入SKU",
                "minimumInputLength":1,//最少输入多少个字符后开始查询
                escapeMarkup: function (markup) {
                    return markup;
                }
            }).on('change', function(event) {
                let objTarget = $(event.target);
                let pSkuId = objTarget.val();
                let nextTd = objTarget.closest('tr').find("td:eq(1)");
                if(!pSkuId){
                    nextTd.text('');
                }else{
                    $.getJSON('/xqc/api-sys/product-match', {'id':pSkuId}, function(data){
                        nextTd.text(data);
                    });
                }
            });

            $(".integer_num_").inputmask("integer",{
                onKeyValidation: function () {
                    if($(this).val() <= 0 || $(this).val() > $(this).data('max')){
                        $(this).val('');
                    }
                }
            });
        });

        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });

        let getParam = function () {
            let param = {};
            $('#table-detail tbody').children("tr").each(function(index){
                let tr = $(this);

                let indexArr = {};
                indexArr['pickup_no'] = $('input[name="pickup_no"]').val().trim();
                indexArr['psku_id'] = tr.find('select').val();
                indexArr['demand_month'] = tr.find("input:eq(0)").val();
                indexArr['apply_num'] = tr.find("input:eq(1)").val();
                param[index] = indexArr;
            });

            return param;
        };

        function checkCodOForm(){
            let length = $('#table-detail tr').length;
            if(length == 0){
                swal('无数据，请录入信息', '', 'error');
                return false;
            }

            let flag1 = true;
            $(".integer_num_").each(function(index){
                if($(this).val() == '' || $(this).val() > $(this).data('max') ){
                    flag1 = false;
                }
            });
            if(!flag1){
                swal('发货数量有误', '', 'error');
                return false;
            }
            return true;
        }

        $('#submit-form').on('click', function(e) {

            e.preventDefault();
            if(checkCodOForm()){
                let param = getParam();

                $.ajax({
                    method: 'post',
                    url: '/xqc/product-pickup/pickup-order-ajax',
                    data: {
                        _token: "{{ csrf_token() }}",
                        action: 'createPickupOrderDetail',
                        param: param
                    },
                    success: function (data) {
                        if (typeof data === 'object') {
                            if (data.status) {
                                toastr.success(data.message);
                                //$.pjax.reload('#delivery-demand-create-form');
                            } else {
                                swal(data.message, '', 'error');
                            }
                        }
                    }
                });
            }
        });

    });
</script>
